<div class="figure-wrapper">
  <figure
      style="gap:8px;flex-direction:column;padding-block:8px;"
      aria-label="Two rows of toggling icon buttons, the top row is unselected and the bottom row is selected">
    <div style="display:flex;gap:8px;">
      <md-icon-button toggle>
        <md-icon>close</md-icon>
        <md-icon slot="selected">check</md-icon>
      </md-icon-button>
      <md-filled-icon-button toggle>
        <md-icon>close</md-icon>
        <md-icon slot="selected">check</md-icon>
      </md-filled-icon-button>
      <md-filled-tonal-icon-button toggle>
        <md-icon>close</md-icon>
        <md-icon slot="selected">check</md-icon>
      </md-filled-tonal-icon-button>
      <md-outlined-icon-button toggle>
        <md-icon>close</md-icon>
        <md-icon slot="selected">check</md-icon>
      </md-outlined-icon-button>
    </div>
    <div style="display:flex;gap:8px;">
      <md-icon-button toggle selected>
        <md-icon>close</md-icon>
        <md-icon slot="selected">check</md-icon>
      </md-icon-button>
      <md-filled-icon-button toggle selected>
        <md-icon>close</md-icon>
        <md-icon slot="selected">check</md-icon>
      </md-filled-icon-button>
      <md-filled-tonal-icon-button toggle selected>
        <md-icon>close</md-icon>
        <md-icon slot="selected">check</md-icon>
      </md-filled-tonal-icon-button>
      <md-outlined-icon-button toggle selected>
        <md-icon>close</md-icon>
        <md-icon slot="selected">check</md-icon>
      </md-outlined-icon-button>
    </div>
  </figure>
</div>
